<template>
	<div class="add-tag">
		<div class="form-contain">
			<ve-content>
				<el-form
					:model="queryForm"
					label-width="100px"
					label-position="right"
					ref="queryForm"
					class="queryForm"
				>
					<el-form-item
						label="标签名称:"
						prop="name"
						:rules="{ required: true, message: '请填写名称', trigger: 'blur'}"
					>
						<el-input
							v-model="queryForm.name"
							placeholder="名称最多支持10字"
							show-word-limit
							maxlength="10"
						/>
					</el-form-item>
					<el-form-item
						label="适用项目:"
						prop="labelProjectRelations"
						:rules="{ required: true, message: '请设置项目', trigger: 'blur' }"
					>
						<cas-box
							v-model="queryForm.labelProjectRelations"
							@change="handChange($event,'labelProjectRelations')"
							style="width:480px"
							:props-options="{multiple: true}"
							ref="projectCascader"
							:has-all-project="true"
						/>
					</el-form-item>
					<el-form-item
						label="应用范围:"
						prop="applyScopes"
						:rules="{ required: true, message: '请设置应用范围', trigger: 'blur' }"
					>
						<el-checkbox-group v-model="queryForm.applyScopes" @change="handChange($event,'applyScopes')">
							<el-checkbox label="C" name="type">课件</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item
						label="是否必填:"
						prop="isRequired"
						:rules="{ required: true, message: '请选择是否必填', trigger: 'blur' }"
					>
						<el-radio-group v-model="queryForm.isRequired" @change="handChange($event,'isRequired')">
							<el-radio label="Y">必填</el-radio>
							<el-radio label="N">非必填</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item
						label="状态:"
						prop="availableState"
						:rules="{ required: true, message: '请选择状态', trigger: 'blur' }"
					>
						<el-radio-group
							v-model="queryForm.availableState"
							@change="handChange($event,'availableState')"
						>
							<el-radio label="Y">启用</el-radio>
							<el-radio label="N">禁用</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item
						label="标签属性:"
						prop="labelProperty"
						:rules="{ required: true, message: '请选择标签属性', trigger: 'blur' }"
					>
						<el-radio-group
							v-model="queryForm.labelProperty"
							@change="handChange($event,'labelProperty')"
						>
							<slot name="radio" />
							<!-- <el-radio label="R">单选</el-radio>
							<el-radio label="C">多选</el-radio>-->
						</el-radio-group>
					</el-form-item>
					<draggable-box v-model="queryForm.labelDetails" handle=".mover" animation="300">
						<transition-group>
							<el-form-item
								v-for="(domain, index) in queryForm.labelDetails"
								label="标签值"
								class="label-detail-name"
								:key="domain.index"
								:prop="'labelDetails.' + index + '.name'"
								:rules="{
									required: true, message: '标签值不能为空', trigger: 'blur'
								}"
							>
								<el-input
									ref="inputs"
									v-model.trim="domain.name"
									:maxlength="10"
									style="width:460px"
									placeholder="请输入"
									@blur="onBlur"
								>
									<template slot="prepend" class="pre-class">
										<img src="../../../assets/images/more.png" class="mover img">
									</template>
								</el-input>
								<i
									class="el-icon-delete"
									@click.prevent="removeDomain(index)"
									style="color:red"
									v-if="character"
								/>
								<el-tooltip
									class="item"
									effect="dark"
									content="启用标签"
									placement="top"
									v-if="domain.availableState == 'N'"
									v-show="!character"
								>
									<i class="el-icon-remove-outline theme_font_color" @click="changeAvailableState(index)" />
								</el-tooltip>
								<el-tooltip
									class="item"
									effect="dark"
									content="禁用标签"
									placement="top"
									v-if="domain.availableState == 'Y'"
									v-show="!character"
								>
									<i class="el-icon-remove" @click="forbiddenAvailableState(index)" />
								</el-tooltip>
							</el-form-item>
						</transition-group>
					</draggable-box>
					<el-form-item>
						<el-link icon="el-icon-circle-plus-outline" :underline="false" @click="addMark">添加选项</el-link>
					</el-form-item>
					<el-form-item label="备注说明:" prop="remark">
						<el-input
							v-model="queryForm.remark"
							type="textarea"
							:maxlength="100"
							:autosize="{ minRows: 5, maxRows: 6}"
							show-word-limit
							placeholder="请输入解释说明"
						/>
					</el-form-item>
					<el-form-item>
						<el-row type="flex" justify="end">
							<el-col :span="8">
								<el-button type="primary" @click="saveForm('queryForm')">保存</el-button>
								<el-button @click="resetForm('queryForm')">取消</el-button>
							</el-col>
						</el-row>
					</el-form-item>
					<div class="tag">
						<i>*</i>标签值:
					</div>
				</el-form>
				<el-dialog
					title="提示"
					:visible.sync="visible"
					width="350px"
					top="20vh"
					:before-close="handleClose"
					center
				>
					<span>标签值禁用后，已设定的资源信息保持不变，编辑和添加资源时，该标签值不允许选用，确定禁用该标签值吗？</span>
					<span slot="footer" class="dialog-footer">
						<el-button @click="handleClose">取 消</el-button>
						<el-button type="primary" @click="handConfirm">确 定</el-button>
					</span>
				</el-dialog>
			</ve-content>
		</div>
	</div>
</template>

<script>
	//引入级联选择器
	import draggableBox from "vuedraggable";
	import casBox from "../../components/async/cascader-project.vue";
	// import tagApi from "../../../apis/rc/tag.mjs";
	export default {
		name: "about-tag",
		components: { casBox, draggableBox },
		props: {
			/* queryForm Object
			 * queryForm.name :""标签名称
			 * queryForm.labelProjectRelations: [] 适用项目
			 * queryForm.applyScopes: [], 适用范围
			 * queryForm.isRequired: "", 是否必填
			 * queryForm.availableState: "", 状态
			 * queryForm.labelProperty: "", 标签属性
			 * queryForm.labelDetails
			 * queryForm.labelDetails[n].name 标签值
			 * queryForm.remark备注说明
			 */
			queryForm: {
				type: Object,
				default: () => {}
			},
			//添加标签为true 修改标签为false
			character: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				visible: false,
				id: 20,
				changeIndex: 0
			};
		},
		created() {
			if (this.character) {
				this.showLabelDetails();
			}
		},
		methods: {
			handChange(val, name) {
				this.queryForm[name] = val;
			},
			//取消
			resetForm(name) {
				this.$refs[name].resetFields();
				nlapp.PageUtil.navigateToOnly("/rc/tag/list");
			},
			//保存
			saveForm(name) {
				let formParams = JSON.parse(JSON.stringify(this.queryForm));
				//给标签值添加状态
				// formParams.labelDetails.forEach((item) => {
				// 	item.availableState = formParams.availableState;
				// });
				formParams.labelDetails.forEach((item) => {
					delete item.index;
				});
				//
				//获取项目名称
				let projectVos = null;
				projectVos = this.$refs.projectCascader.api_getCheckedNodes(); // 获取选中的全部节点
				projectVos = projectVos.filter((i) => !i.hasChildren); // 过滤掉父级节点
				projectVos = projectVos.map((i) => ({ projectId: i.value, projectName: i.label })); // 根据后端需要的格式进行格式化
				formParams.labelProjectRelations = projectVos;
				this.$refs[name].validate((valid) => {
					if (valid) {
            //编辑标签时，如果状态为禁用，则予以确认提示
						if (formParams.availableState === "N" && !this.character) {
							this.$confirm("当前暂无资源使用该标签，禁用后所有资源将无法标记该标签，确定禁用吗？", {
								confirmButtonText: "确定",
								cancelButtonText: "取消"
							})
								.then(() => {
									this.$emit("save-form", formParams);
								})
								.catch(() => {
									return;
								});
						} else {
							this.$emit("save-form", formParams);
						}
					} else {
						return false;
					}
				});
			},
			//删除标签
			removeDomain(index) {
				if (this.queryForm.labelDetails.length <= 2) {
					this.$message("标签值不能少于2个；选项最多不能多于20个");
					return;
				}
				this.queryForm.labelDetails.splice(index, 1);
				this.$message("删除成功");
			},
			//添加标签
			addMark() {
				if (this.queryForm.labelDetails.length >= 20) {
					this.$message("标签值不能超过20个");
					return;
				}
				let index = this.id + 1;
				this.id++;
				this.queryForm.labelDetails.push({ name: "", availableState: "Y", index: index });
			},
			onBlur(name, index) {
				if (name == "") return;
				this.queryForm.labelDetails.forEach((item, ind) => {
					if (item.name == name && ind != index) {
						this.$message("标签值不可重复，请重新输入");
						this.queryForm.labelDetails[index].name = "";
					}
				});
			},
			//添加标签时，每个标签都添加一个状态和index的属性
			showLabelDetails() {
				let index = 0;
				this.queryForm.labelDetails.forEach((item) => {
					item.availableState = "Y";
					item.index = index;
					index += 1;
				});
			},
			//改变标签值状态
			changeAvailableState(index) {
				this.queryForm.labelDetails[index].availableState = "Y";
			},
			//禁用标签值
			forbiddenAvailableState(index) {
				this.visible = true;
				this.changeIndex = index;
			},
			handleClose() {
				this.visible = false;
			},
			handConfirm() {
				let num = 0;
				this.queryForm.labelDetails.forEach((item) => {
					if (item.availableState == "Y") {
						num += 1;
					}
				});
				this.visible = false;
				if (num <= 2) {
					this.$message("标签值不能少于2个");
				} else {
					this.queryForm.labelDetails[this.changeIndex].availableState = "N";
				}
			}
		}
	};
</script>
<style lang="less" scoped>
	.form-contain {
		width: 600px;
		img {
			height: 18px;
			width: auto;
			box-sizing: border-box;
			padding-top: 6px;
		}
	}
	.el-form .label-detail-name /deep/ label {
		visibility: hidden;
	}
	.queryForm {
		position: relative;
		.tag {
			height: 33px;
			width: 90px;
			position: absolute;
			line-height: 33px;
			top: 306px;
			left: 0px;
			text-align: right;
			i {
				content: "*";
				color: #f56c6c;
				margin-right: 4px;
			}
		}
	}
	.el-form-item__content {
		.el-input {
			/deep/ .el-input-group__prepend {
				background-color: #fff;
				width: 20px;
				border: none;
				padding: 0;
			}
		}
	}
	.img:hover {
		cursor: pointer;
	}
	.img:active {
		cursor: pointer;
	}
	.img:visited {
		cursor: pointer;
	}
	[class*=" el-icon-"],
	.el-icon-delete {
		cursor: pointer;
	}
</style>
